<template>
    <div>
        <navigationBar
            :fixed="true"
            :bgType="3"
            :backType="2"
            navigationTitle="招商加盟"
        />
        <img src="/static/static/technician/joinUs/formBg.png" class="formBg" />
        <view class="content">
            <view class="card">
                <view class="title fb-32">基本信息收集</view>
                <view class="item f-30">
                    <view class="label">姓名</view>
                    <input
                        type="text"
                        v-model="form.name"
                        placeholder="请输入您的姓名"
                    />
                </view>
                <view class="item f-30">
                    <view class="label">手机号</view>
                    <input
                        type="number"
                        v-model="form.mobile"
                        maxlength="11"
                        placeholder="请输入手机号码"
                    />
                </view>
                <view class="item f-30" @click="onChooseArea">
                    <view class="label">申请地区</view>
                    <view :class="form.area ? 'text' : 'placeholder'">
                        {{ form.area || "请选择您想代理的区域" }}
                    </view>
                </view>
                <view class="item f-30">
                    <view class="label">备注</view>
                    <textarea
                        v-model="form.remarks"
                        placeholder="请输入备注信息"
                        maxlength="100"
                    ></textarea>
                    <text class="num"> {{ form.remark.length }}/100 </text>
                </view>
            </view>

            <view class="card">
                <view class="tips f-30"> 合作加盟说明 </view>
                <rich-text :nodes="tips"></rich-text>
            </view>
        </view>
        <view class="btns">
            <view class="btn" @click="submit"> 提交申请 </view>
        </view>

        <view class="mask" @click="visible = false" v-if="visible"></view>

        <view class="picker" v-if="visible">
            <view class="picker-btn">
                <text class="cancel" @click="cancel">取消</text>
                <text class="confirm" @click="confirm">确认</text>
            </view>
            <picker-view
                :indicator-style="indicatorStyle"
                :value="value"
                @change="bindChange"
                class="picker-view"
            >
                <picker-view-column>
                    <view
                        class="item"
                        v-for="(item, index) in sheng"
                        :key="index"
                        >{{ item.name }}</view
                    >
                </picker-view-column>
                <picker-view-column>
                    <view
                        class="item"
                        v-for="(item, index) in shi"
                        :key="index"
                    >
                        {{ item.name }}
                    </view>
                </picker-view-column>
                <picker-view-column>
                    <view class="item" v-for="(item, index) in qu" :key="index">
                        {{ item.name }}
                    </view>
                </picker-view-column>
            </picker-view>
        </view>
    </div>
</template>
<script>
import { application } from "@/API/API/recruit.js";
import { getRegionList } from "@/API/API/recruit.js";
export default {
    data() {
        return {
            form: {
                name: "",
                mobile: "",
                area: "",
                remark: "",
            },
            tips: `<p>1、说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案</p><p>2、说明文案说明文案说明文案说明文案说明文案说明文案说明文案说明文案</p>`,
            region_list: [],
            visible: false,
            indicatorStyle: `height: 50px;`,
            value: [0, 0, 0],
            sheng: [],
            shi: [],
            qu: [],
        };
    },

    onLoad() {
        this.getRegionList();
        this.tips = uni.getStorageSync("___init_data___").CooperationState;
    },

    methods: {
        // 获取地区
        getRegionList() {
            getRegionList()
                .then((res) => {
                    this.region_list = res.data;
                    this.sheng = this.region_list;
                    this.shi = this.sheng[0].children;
                    this.qu = this.shi[0].children;
                })
                .catch((err) => {
                    uni.showToast({ title: err.msg, icon: "none" });
                });
        },
        // 提交
        submit() {
            if (!this.form.name) {
                uni.showToast({ title: "请输入姓名", icon: "none" });
                return;
            } else if (!this.form.mobile) {
                uni.showToast({ title: "请输入手机号", icon: "none" });
                return;
            } else if (!this.form.area) {
                uni.showToast({ title: "请选择地区", icon: "none" });
                return;
            }
            application(this.form)
                .then((res) => {
                    uni.showToast({ title: res.msg, icon: "none" });
                    setTimeout(() => {
                        uni.redirectTo({
                            url: "/subPages/technician/recruit/ToBeReviewed?type=back",
                        });
                    }, 800);
                })
                .catch((err) => {
                    uni.showToast({ title: err.msg, icon: "none" });
                });
        },

        // 选择地区
        onChooseArea() {
            this.visible = true;
        },
        bindChange(e) {
            const val = e.detail.value;
            if (val[0] !== this.value[0]) {
                this.value = [val[0], 0, 0];
            } else if (val[1] !== this.value[1]) {
                this.value = [val[0], val[1], 0];
            } else {
                this.value = [val[0], val[1], val[2]];
            }
            this.shi = this.sheng[this.value[0]].children;
            this.qu = this.shi[this.value[1]].children;
        },

        // 取消
        cancel() {
            this.visible = false;
        },

        // 确认
        confirm() {
            this.visible = false;
            this.form.area = `${this.sheng[this.value[0]].name}/${
                this.shi[this.value[1]].name
            }/${this.qu[this.value[2]].name}`;
        },
    },
};
</script>
<style lang="scss" scoped>
.formBg {
    width: 100vw;
    height: 544rpx;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.content {
    padding: 0 30rpx 150rpx 30rpx;
    box-sizing: border-box;
    position: relative;
    z-index: 99;
    top: 400rpx;
    .title {
        text-align: center;
        margin-bottom: 30rpx;
    }
    .item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 30rpx 10rpx;
        border-bottom: 2rpx solid #ececec;
        text-align: right;
        .label {
            text-align: left;
            width: 200rpx;
        }
        input {
            box-sizing: border-box;
            font-size: 26rpx;
        }
    }
    .item:last-child {
        border-bottom: none;
        position: relative;
        .label {
            width: 100%;
            text-align: left;
            margin-bottom: 20rpx;
        }
        display: flex;
        flex-direction: column;
        textarea {
            width: 100%;
            height: 260rpx;
            padding: 20rpx 10rpx;
            box-sizing: border-box;
            background: #f6f6f6;
            border-radius: 20rpx;
            text-align: left;
            font-size: 26rpx;
        }
        .num {
            position: absolute;
            bottom: 50rpx;
            right: 30rpx;
            color: #999;
            font-size: 24rpx;
        }
    }
    .tips {
        margin-bottom: 20rpx;
    }
}
.card {
    width: 100%;
    background: #fff;
    border-radius: 20rpx;
    box-sizing: border-box;
    padding: 30rpx 24rpx;
    margin-bottom: 20rpx;
}
.btns {
    background: white;
    width: 100vw;
    height: 130rpx;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    box-shadow: 0 0 20rpx 0 rgba(0, 0, 0, 0.1);
    z-index: 99999;

    .btn {
        position: absolute;
        height: 80rpx;
        line-height: 80rpx;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
        background: $grad-theme-color;
        border-radius: 40rpx;
        color: white;
        text-align: center;
        font-size: 30rpx;
    }
}
p {
    line-height: 1.2rem;
    margin-bottom: 10rpx;
    font-size: 26rpx;
    color: #666;
}
.placeholder {
    color: #999;
}

.mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
}
.picker {
    border-top: 1rpx solid #eeeeee;
    box-shadow: 0 0 10rpx #eeeeee;
    width: 750rpx;
    height: 600rpx;
    margin-top: 20rpx;
    background: white;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 99999999;
    .picker-view {
        width: 100%;
        height: 100%;
        padding: 0 20rpx;
        box-sizing: border-box;
    }
    .picker-btn {
        width: 100%;
        padding: 20rpx 30rpx 20rpx 30rpx;
        box-sizing: border-box;
        background: white;
        color: #000;
        font-size: 28rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1rpx solid #f5f5f5;

        .cancel {
            color: #999999;
        }
        .confirm {
            color: #00ce45;
        }
    }
}
.item {
    line-height: 100rpx;
    text-align: center;
}
</style>